<template>
    <div class="h-full w-full" >
      <a-tabs v-if="props.defaultData.runType=='0'">
            <a-tab-pane key="1" tab="人员">
              <users ref="userRef" style="height:40vh;overflow: auto;" :defaultData="props.defaultData" @updateValue="handleValueUpdate"></users>
            </a-tab-pane>
            <!-- <a-tab-pane key="2" tab="机构">Content of Tab Pane 2</a-tab-pane>
            <a-tab-pane key="3" tab="部门">Content of Tab Pane 3</a-tab-pane> -->
            <a-tab-pane key="4" tab="岗位">
              <stations ref="stationRef" style="height:40vh;overflow: auto;" :defaultData="props.defaultData" @updateValue="handleValueUpdate"></stations>
            </a-tab-pane>
            <a-tab-pane key="5" tab="群组">
              <groups ref="groupRef" style="height:40vh;overflow: auto;" :defaultData="props.defaultData" @updateValue="handleValueUpdate"></groups>
            </a-tab-pane>
      </a-tabs>
      <a-tabs v-if="props.defaultData.runType=='2'">
            <a-tab-pane key="1" tab="岗位">
              <stations ref="stationRef" style="height:40vh;overflow: auto;" :defaultData="props.defaultData" @updateValue="handleValueUpdate"></stations>
            </a-tab-pane>
      </a-tabs>
      <a-tabs v-if="props.defaultData.runType=='3'">
            <a-tab-pane key="1" tab="部门">
              <dept ref="deptRef" style="height:40vh;overflow: auto;" :defaultData="props.defaultData" @updateValue="handleValueUpdate"></dept>
            </a-tab-pane>
      </a-tabs>
      <template v-if="props.defaultData.runType=='1'">
      <expression  style="height:50vh;overflow: auto;" :defaultData="props.defaultData" @updateValue="handleValueUpdate"></expression>
    </template>
    </div>
    <a-divider  orientation="left">已选择：</a-divider>
    <div style="border: 1px solid #e6e8eb;height: 10vh;">
      <a-space>
        <a-tag :closable="true"  @close="handleClose(tag)" @click="handlerTagChange(tag)" v-for="tag in selectData" :key="tag.NO">
          {{ tag.NAME }}  
        </a-tag>  
      </a-space>
    </div>
    
    
  </template>
  
  <script setup lang="tsx">
    import { ref, reactive, computed, onMounted, h, watch } from 'vue';
    import users from '@/components/setting/subComponents/users.vue';
    import stations from '@/components/setting/subComponents/station.vue';
    import dept from '@/components/setting/subComponents/dept.vue';
    import groups from '@/components/setting/subComponents/group.vue';
    import expression from '@/components/setting/subComponents/expression.vue';
    import type { TreeDataItem } from '@/core/permission/utils';
    import { SplitPanel } from '@/components/basic/split-panel';

    interface Props {
      defaultData?: any;
    }
    const props = withDefaults(defineProps<Props>(), {
      defaultData: [{
        defaultSelectData: [],
        runType: '',
        clickValue:''
      }]
    });
    defineOptions({
      name: 'assigneeSetting',
    });
    const userRef=ref(null);
    const stationRef=ref(null);
    const groupRef=ref(null);
    const selectData=ref<any>([]);
    const loadTableData = async () => {
      selectData.value=props.defaultData.defaultSelectData;
    };
    loadTableData();
    //删除组织结构数据标签
    const handleClose=(record)=>{
      props.defaultData.defaultSelectData=props.defaultData.defaultSelectData.filter((item)=>item.NO!==record.NO);
      selectData.value=props.defaultData.defaultSelectData;
      const newData=[];
      props.defaultData.defaultSelectData.map((item)=>{
        if(item.ORG_TYPE==record.ORG_TYPE){
          newData.push(item.NO);
        } 
      })
      if(record.ORG_TYPE=="user"){
        if(userRef.value!=null){
          userRef.value.handlerUpdate(newData);
        }
      }
      if(record.ORG_TYPE=="station"){
        if(stationRef.value!=null){
          stationRef.value.handlerUpdate(newData);
        }
      }
      if(record.ORG_TYPE=="group"){
        if(groupRef.value!=null){
          groupRef.value.handlerUpdate(newData);
        }
      }
    }
    const handleValueUpdate = (newValue) => {
      console.log(newValue,'newValue111')
      if(selectData.value.length>0){
        const propDataNos=new Set(selectData.value.map(obj=>obj.NO));
        const newObjects=newValue.filter(obj => !propDataNos.has(obj.NO));
        if(newObjects.length<=0){
          const changeData=selectData.value.filter(obj => obj.ORG_TYPE==newValue[0].ORG_TYPE&&obj.NO!=newValue[0].NO);
          if(changeData.length>0){
            selectData.value=selectData.value.filter(obj => obj.NO!==changeData[0].NO);
          }
        }
        else{
          if(newObjects[0].NO==="none"){
            selectData.value=selectData.value.filter(obj => obj.ORG_TYPE!==newObjects[0].ORG_TYPE);
          }
          else{
            selectData.value.push(...newObjects);
          }
          
        }
        
      }
      else{
        selectData.value=newValue;
      }
      props.defaultData.defaultSelectData=selectData.value;
    }; 
    const onSubMit = async () => {
      
      return selectData.value;
    };

    const handlerTagChange=(record)=>{
      props.defaultData.clickValue=record;
    }

    defineExpose({
      handleSubmit: onSubMit,
    });
  </script>
  
  <style lang="less" scoped>
  @import '@/styles/navTheme.less';
  @classBacks: user-page-box;
  .customSetStyle(@classBacks, background-color, 'content-back-user');
  
  :deep(.ant-tree) {
    flex: 1;
  }
  
  .testtitle {
    width: 100%;
    overflow: hidden;
    line-height: 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .testitem {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 150px;
    align-items: center;
  }
  </style>
  